<template>
  <div>
    <el-card class="box-card">
      <UserHeader type="1" @updataList="updataList" :listData="listData" :form="formData" @updataMethode="updataMethode">
        <template v-slot:right>
          <el-button style="float: right" @click="dialogFormVisible = true; types='2'" size="small" icon="el-icon-edit"  type="success" >新增权限组</el-button>
        </template>
      </UserHeader>
      <el-table
        :data="UserList"
        style="width: 100%"
        :default-sort = "{prop: 'date', order: 'descending'}"
      >
        <el-table-column
          prop="id"
          label="序号"
          width="259"
          align="center">
        </el-table-column>
        <el-table-column
          prop="email"
          label="邮箱"
          align="center"
          width="259">
        </el-table-column>
        <el-table-column
          prop="name"
          label="联系电话"
          align="center"
          width="259">
        </el-table-column>
        <el-table-column
          prop="username"
          label="用户名"
          align="center"
          width="259">
        </el-table-column>
        <el-table-column
          prop="permission_group_title"
          label="权限组名称"
          align="center"
          width="259">
        </el-table-column>
        <el-table-column
          prop="role"
          label="角色"
          align="center"
          width="259">
        </el-table-column>
        <el-table-column
          label="操作"
          width="100"
          align="center">
          <template v-slot="{row}">
            <el-button @click="setUserData(row)" size="mini" class="Edit" icon="el-icon-edit" circle></el-button>
            <el-button v-if="!(row.id === 2)" @click="onDel(row)" size="mini" class="Delete" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <PageTool
        @pageChange="onChange"
        @pageSizeChange="onSizeChange"
        :total="total"
        :paginationPage="form.page"
        :paginationPagesize="form.pagesize" />
    </el-card>
    <UserAdd @replacement="replacement" @updateList="getUserList" :form="formData" :type="types" :dialogFormVisible.sync="dialogFormVisible"></UserAdd>
  </div>
</template>

<script>
import UserHeader from '../components/UserHeader'
import { list, remove } from '../../api/base/users'
import UserAdd from '../components/UserAddList'
import PageTool from '../components/page-tool.vue'
export default {
  data () {
    return {
      UserList: [],
      form: {
        page: 1,
        pagesize: 10
      },
      dialogFormVisible: false,
      formData: {
        username: '',
        role: '',
        phone: '',
        permission_group_id: '',
        avatar: '',
        email: '',
        password: '',
        introduction: ''
      },
      total: '',
      types: '1'
    }
  },

  created () {
    this.getUserList()
  },

  methods: {
    async getUserList () {
      const res = await list(this.form)
      this.total = res.data.counts
      this.paginationPage = res.data.page
      this.paginationPagesize = res.data.pagesize
      this.UserList = res.data.list
    },
    async onDel (row) {
      await remove(row)
      this.$message.success('删除成功')
      this.getUserList()
    },
    async setUserData (row) {
      this.dialogFormVisible = true
      // this.formData = row
      this.formData.id = ''
      const obj = {}
      Object.keys(this.formData).forEach(item => {
        Object.keys(row).forEach(it => {
          if (item === it) {
            obj[it] = row[it]
          }
        })
      })
      this.formData = obj
    },
    replacement (obj) {
      this.formData = obj
    },
    onSizeChange (val) {
      console.log(val)
      this.form.pagesize = val
      this.getUserList()
    },
    onChange (val) {
      console.log(val)
      this.form.page = val
      this.getUserList()
    },
    updataList (val) {
      this.UserList = val
    },
    async updataMethode () {
      this.form.page = 1
      const res = await list(this.form)
      this.UserList = res.data.list
    }
  },
  components: {
    UserHeader,
    UserAdd,
    PageTool
  }
}
</script>

<style scoped lang='less'>
.box-card {
  margin: 20px;
  .Edit{
    background: #ecf5ff;
    color: #409eff;
    border-color: #b3d8ff;
    &:hover{
      background: #409eff;
      color: #fff;
    }
  }
  .Delete {
    background: #fef0f0;
    color: #f56c6c;
    border-color: #fbc4c4;
    &:hover{
      background: #f56c6c;
      color: #fff;
    }
  }
}
</style>
